<template>
    <div class="l-auto-window" style="padding:8px;padding-bottom:0;" >
        <el-tabs v-model="activeName" type="card" :before-leave="handleTabBeforeLeave" >
            <el-tab-pane :label="$t('基础信息')" name="base">
                <div class="l-from-body" >
                    <el-form :model="formData" :rules="rules" size="mini"  ref="form" label-width="60px" >
                        <el-col :span="12" v-if="lr_hasPageAuth('f_EnCode')">
                            <el-form-item :label="$t('编号')" prop="f_EnCode" >
                                <el-input v-model="formData.f_EnCode"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="lr_hasPageAuth('f_FullName')">
                            <el-form-item :label="$t('名称')" prop="f_FullName" >
                                <el-input v-model="formData.f_FullName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="lr_hasPageAuth('f_ParentId')">
                            <el-form-item :label="$t('上级')" prop="f_ParentId" >
                                <l-tree-select
                                    v-model="formData.f_ParentId"
                                    :options="modulesExpandTree">
                                </l-tree-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="lr_hasPageAuth('f_Icon')">
                            <el-form-item :label="$t('图标')" prop="f_Icon" >
                                <l-input-icon :iconList="lr_icons"  v-model="formData.f_Icon" >
                                </l-input-icon>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12"  v-if="lr_hasPageAuth('f_Target')">
                            <el-form-item :label="$t('目标')" prop="f_Target" >
                                <el-select v-model="formData.f_Target" :placeholder="$t('请选择')">
                                    <el-option
                                    v-for="item in f_TargetOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="lr_hasPageAuth('f_SortCode')">
                            <el-form-item :label="$t('排序')" prop="f_SortCode" >
                                <el-input-number v-model="formData.f_SortCode"  controls-position="right" :min="1" ></el-input-number>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" v-if="lr_hasPageAuth('f_UrlAddress')">
                            <el-form-item :label="$t('地址')" prop="f_UrlAddress" >
                                <el-input v-model="formData.f_UrlAddress"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12" v-if="lr_hasPageAuth('f_IsMenu')">
                            <el-form-item :label="$t('菜单')"  prop="f_IsMenu" >
                                    <el-switch
                                    :active-value="1"
                                    :inactive-value="0"
                                    v-model="formData.f_IsMenu"
                                    >
                                </el-switch>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12" v-if="lr_hasPageAuth('f_EnabledMark')">
                            <el-form-item :label="$t('状态')" prop="f_EnabledMark" >
                                    <el-switch
                                    :active-value="1"
                                    :inactive-value="0"
                                    v-model="formData.f_EnabledMark"
                                    >
                                </el-switch>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" v-if="lr_hasPageAuth('f_Description')">
                            <el-form-item :label="$t('描述')" prop="f_Description">
                                <el-input type="textarea" v-model="formData.f_Description"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </div>
            </el-tab-pane>
            <el-tab-pane :label="$t('按钮信息')" name="btninfo">
                <div class="l-from-table-body" >
                    <l-edit-table
                        :addBtnText="$t('添加按钮')"
                        :dataSource="formButtons"

                        @addRow="handleAddButton"
                        @deleteRow="handleDeleteButton"
                        >
                        <el-table-column
                        prop="f_FullName"
                        :label="$t('名称')"
                        minWidth="100">
                            <template slot-scope="scope">
                                <el-input size="mini" v-model="scope.row.f_FullName" :placeholder="$t('请输入')" ></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                        prop="f_EnCode"
                        :label="$t('编号')"
                        minWidth="100">
                            <template slot-scope="scope">
                                <el-input size="mini" v-model="scope.row.f_EnCode" :placeholder="$t('请输入')"></el-input>
                            </template>
                        </el-table-column>
                    </l-edit-table >
                </div>
            </el-tab-pane>
            <el-tab-pane :label="$t('列表信息')" name="colinfo">
                <div class="l-from-table-body" >
                    <l-edit-table
                        :addBtnText="$t('添加列表字段')"
                        :dataSource="formColumns"

                        @addRow="handleAddColumns"
                        @deleteRow="handleDeleteColumns"
                        >
                        <el-table-column
                        prop="f_FullName"
                        :label="$t('名称')"
                        minWidth="100">
                            <template slot-scope="scope">
                                <el-input size="mini" v-model="scope.row.f_FullName" :placeholder="$t('请输入')" ></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                        prop="f_EnCode"
                        :label="$t('编号')"
                        minWidth="100">
                            <template slot-scope="scope">
                                <el-input size="mini" v-model="scope.row.f_EnCode" :placeholder="$t('请输入')"></el-input>
                            </template>
                        </el-table-column>
                    </l-edit-table >
                </div>
            </el-tab-pane>
            <el-tab-pane :label="$t('表单信息')" name="forminfo">
                <div class="l-from-table-body" >
                    <l-edit-table
                        :addBtnText="$t('添加表单字段')"
                        :dataSource="formForms"

                        @addRow="handleAddForms"
                        @deleteRow="handleDeleteForms"
                        >
                        <el-table-column
                        prop="f_FullName"
                        :label="$t('名称')"
                        minWidth="100">
                            <template slot-scope="scope">
                                <el-input size="mini" v-model="scope.row.f_FullName" :placeholder="$t('请输入')" ></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                        prop="f_EnCode"
                        :label="$t('编号')"
                        minWidth="100">
                            <template slot-scope="scope">
                                <el-input size="mini" v-model="scope.row.f_EnCode" :placeholder="$t('请输入')"></el-input>
                            </template>
                        </el-table-column>
                    </l-edit-table >
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import { mapGetters } from "vuex"
export default {
    props:{
        f_ParentId:String,
    },
    watch:{
        f_ParentId(val){
            this.formData.f_ParentId = val
        }
    },
    created () {
        this.formData.f_ParentId = this.f_ParentId
    },
    data(){
        return {
            activeName:'base',
            f_TargetOptions: [{
                    value: 'expand',
                    label: this.$t('菜单目录')
                }, {
                    value: 'view',
                    label: this.$t('功能页面')
                }, {
                    value: 'groupView',
                    label: this.$t('集合页面')
                }, {
                    value: 'blankView',
                    label: this.$t('独立页面')
                }
            ],
            formData:{
                f_EnCode: '',
                f_FullName: '',
                f_ParentId: '',
                f_Icon: 'learun-icon-star',
                f_Target: '',
                f_IsMenu:1,
                f_EnabledMark:1,
                f_SortCode: '',
                f_UrlAddress: '',
                f_Description: ''
            },
            rules: {
                f_EnCode: [
                    { required: true, message: this.$t('请输入编号') },
                    { validator: this.lr_existDbFiled,keyValue:() => { return this.formData.f_ModuleId },tableName:'lr_base_module',keyName:'f_ModuleId',trigger: 'null'}
                ],
                f_FullName: [
                    { required: true, message: this.$t('请输入名称') }
                ],
                f_Target: [
                    { required: true, message: this.$t('请选择目标') }
                ]
            },
            formButtons:[],
            formColumns:[],
            formForms:[]
        };
    },
    computed:{
        ...mapGetters(["modulesExpandTree"]),
    },
    methods:{
        // 重置表单
        resetForm(){
            this.activeName = 'base';
           
            this.$refs.form && this.$refs.form.resetFields()
            this.formButtons = [];
            this.formColumns = [];
            this.formForms = [];            
        },
        // 校验表单
        validateForm(callback){
            this.$refs.form.validate((valid) => {
                if(valid){
                    if(this.formData.f_Target == 'view'){
                        if(this.$validatenull(this.formData.f_UrlAddress)){
                            this.$message({
                                message: this.$t('请填写地址信息！'),
                                type: 'error'
                            })
                            callback(false)
                        }
                        else{
                            callback(true)
                        }
                    }
                    else{
                        callback(true)
                    }
                }
                else{
                    callback(false)
                }
            })
        },
        // 设置表单数据
        setForm(data){


            this.formData = data.baseInfo
            this.formButtons = data.buttons
            this.formColumns = data.columns
            this.formForms = data.forms
        },
        // 获取表单数据
        getForm(){
            const buttons = []
            this.formButtons.forEach(item => {
                if(item.f_EnCode && item.f_FullName){
                    buttons.push(item)
                }
            })

            const columns = []
            this.formColumns.forEach(item => {
                if(item.f_EnCode && item.f_FullName){
                    columns.push(item)
                }
            })

            const forms = []
            this.formForms.forEach(item => {
                if(item.f_EnCode && item.f_FullName){
                    forms.push(item)
                }
            })

            const postData = {
                baseInfo:this.$deepClone(this.formData),
                buttons,
                columns,
                forms
            };
            return postData
        },

        handleTabBeforeLeave(activeName, oldActiveName){
            return new Promise((resolve,reject) => {
                if(oldActiveName == 'base'){
                    this.$refs.form.validate((valid) => {
                        if(valid){
                            if(this.formData.f_Target != 'view'){
                                this.$message({
                                    message: this.$t('只有功能页面能添加按钮/列表/表单信息！'),
                                    type: 'warning'
                                })
                                reject()
                            }
                            else{
                                resolve()
                            }
                        }
                        else{
                            this.$message({
                                message: this.$t('请先填写完整信息！'),
                                type: 'warning'
                            });
                            reject()
                        }
                    })
                }
                else{
                    resolve()
                }
            })
        },

        // 按钮
        handleAddButton(){
            this.formButtons.push({f_FullName:'',f_EnCode:''});
        },
        handleDeleteButton(data){
            this.formButtons.splice(data.index,1);
        },

        // 列表
        handleAddColumns(){
            this.formColumns.push({f_FullName:'',f_EnCode:''});
        },
        handleDeleteColumns(data){
            this.formColumns.splice(data.index,1);
        },

        // 表单
        handleAddForms(){
            this.formForms.push({f_FullName:'',f_EnCode:''});
        },
        handleDeleteForms(data){
            this.formForms.splice(data.index,1);
        }
    }
}
</script>